<script setup>
import { ref, onMounted } from 'vue'
import {useRouter} from 'vue-router'
// 定义用户名数据
const username = ref('');
// 路由
const router = useRouter();
// 点击按钮进入聊天室
const loginClick = () => {
  // 优先判断username是否有值
  if(!username.value.trim()) {
    alert('请输入用户名')
    return
  }
  // 创建本地数据
  localStorage.setItem('username', username.value);
  // 跳转到home
  router.push('/home');
}

// 在mounted中判断是否有username
onMounted(() => {
  const _username = localStorage.getItem('username');
  if(!_username) {
    return
  }
  // 跳转到home
  router.push('/home');
})
</script>

<template>
  <div>
    <input type="text" v-model="username" placeholder="请输入用户名">
    <button @click="loginClick">进入聊天室</button>
  </div>
</template>

<style>
input {
  height: 30px;
  border: 2px solid skyblue;
  box-shadow: 0px 0px 10px #ccc;
  padding: 5px;
  min-width: 200px;
}

button {
  margin: 0 0 0 15px;
  border: 2px solid pink;
  height: 40px;
  box-shadow: 0px 0px 10px #ccc;
  cursor: pointer;
}
</style>